import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' as math;

class RadialProgress extends StatefulWidget {
  final double completedPercentageValue;
  RadialProgress({this.completedPercentageValue=0.7});

  @override
  _RadialProgressState createState() => _RadialProgressState();
}

///1. 设计
///2. 添加动画

class _RadialProgressState extends State<RadialProgress> with SingleTickerProviderStateMixin {

  AnimationController _radialProgressAnimationController;

  Animation<double> _progressAnimation ;
  final Duration fillDuration = Duration(seconds: 2);
  final Duration fadeInDuration = Duration(milliseconds: 500);

  var progressDegrees = 0.0;

  @override
  void initState() {
    _radialProgressAnimationController = AnimationController(vsync: this,duration: Duration(seconds: 2));
    _progressAnimation = Tween(begin: 0.0,end: 360.0)
        //.animate(_radialProgressAnimationController)
        .animate(CurvedAnimation(parent: _radialProgressAnimationController, curve: Curves.decelerate))
      ..addListener((){
      setState(() {
        progressDegrees =widget.completedPercentageValue*_progressAnimation.value;
      });
      //progressDegrees =
    });
    _radialProgressAnimationController.forward();
    print("------");
    super.initState();
  }



  @override
  void dispose() {
    _radialProgressAnimationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      child: Container(
        height: 200.0,
        width:200,
        padding: const EdgeInsets.symmetric(vertical: 40),
        child: AnimatedOpacity(
          opacity: progressDegrees>30?1.0:0.0,
          duration:  fadeInDuration,
          child: Column(
            children: <Widget>[
              Text("RUNNING",style:TextStyle(fontSize:24.0),),
              SizedBox(height: 4.0,),
              Container(
                height: 5.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    color: Colors.purple,
                    borderRadius: BorderRadius.all(Radius.circular(4.0))
                  ),
              ),
              Text('1.255',
              style: TextStyle(fontSize:40.0,fontWeight: FontWeight.bold),),
              Text('CALORIES BURN',
              style: TextStyle(fontSize: 14.0,color:Colors.blue),)
            ],
          ),
        ),
      ),
      painter: RadialPainter(progressInDegrees: progressDegrees),
    );
  }
}

class RadialPainter extends CustomPainter {

  double progressInDegrees ;

  RadialPainter({this.progressInDegrees});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.grey
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 15;

    Offset center = Offset(size.width/2, size.height/2);
    canvas.drawCircle(center, size.width/2,paint);

    Paint progressPaint = Paint()
      ..color = Colors.blue
      ..shader = LinearGradient(colors:[
        Colors.red,Colors.purple,Colors.purpleAccent
      ]).createShader(Rect.fromCircle(center: center,radius: size.width/2))
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 14;

    canvas.drawArc(Rect.fromCircle(center: center,radius: size.width/2), math.radians(-90), math.radians(progressInDegrees),false, progressPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

}
